<template>
  <contentModel
    title="单一控制来源清单明细表"
    :has-footer="false"
    @close="handleClose"
  >
    <query-page
      ref="subtableQueryForm"
      :table-component-config="tableComponentConfig"
      :table-render-config="mainform1"
      :table-render-keys="mainform1Keys"
      :loading="isLoading"
      :data="subtableListData"
      :total="subtableTotal"
      :has-line="false"
      height="calc(100vh - 240px)"
      @query-data="getData"
    >
    </query-page>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, defineProps } from 'vue';
  import contentModel from '@/common/components/content-model/index.vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    mainform1,
    mainform1Keys,
    tableComponentConfig,
  } from '@/views/basic-configuration/singlelist/Singlelistcolums';
  import { getOrderDetailsList } from '@/api/Basimanagementapi/categorymanagement';

  const props = defineProps({
    detalisId: {
      type: String,
      default: '',
    },
  });
  const isLoading = ref(true);
  const subtableListData = ref([]);
  const subtableTotal = ref();
  const subtableQueryForm = ref();
  const getData = async () => {
    const params = {
      ...subtableQueryForm.value.getStatus(),
      uniqueControlId: props.detalisId,
    };
    const { data: res } = await getOrderDetailsList(params);
    subtableListData.value = res.list;
    subtableTotal.value = res.total;
    isLoading.value = false;
  };
  const emit = defineEmits(['close', 'refresh1']);
  const handleClose = () => {
    emit('close');
    emit('refresh1');
  };
</script>
